<template lang='jade'>
  .weui-tabbar
    .weui-tabbar__item(:class='{ active: homeTabActive }', @click='switchTab(0)')
      span.weui-tabbar__icon
        img(:src='homeTabActive ? icons.homeActive : icons.home')
      div.weui-tabbar__label 联图服务
    .weui-tabbar__item(:class='{ active: searchTabActive }', @click='switchTab(1)')
      span.weui-tabbar__icon
        i.weui-icon-search
        //- img(:src='searchTabActive ? icons.homeActive : icons.home')
      div.weui-tabbar__label 图书检索
    .weui-tabbar__item(:class='{ active: accountTabActive }', @click='switchTab(2)')
      span.weui-tabbar__icon
        img(:src='accountTabActive ? icons.userActive : icons.user')
      div.weui-tabbar__label 个人中心
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  data () {
    return {
      icons: {
        home: require('../assets/tabbar_home.svg'),
        homeActive: require('../assets/tabbar_home__active.svg'),
        user: require('../assets/tabbar_user.svg'),
        userActive: require('../assets/tabbar_user__active.svg')
      }
    }
  },
  computed: {
    homeTabActive () {
      return !(this.accountTabActive || this.searchTabActive)
    },
    accountTabActive () {
      return /^\/account/.test(this.$route.path)
    },
    searchTabActive () {
      return /^\/(search|book)/.test(this.$route.path)
    },
    ...mapGetters({
      'user': 'userInfo'
    })
  },
  methods: {
    switchTab (index) {
      switch (index) {
        case 0:
          this.$router.replace({
            name: 'home'
          })
          break

        case 1:
          this.$router.replace({
            name: 'search'
          })
          break

        case 2:
          if (this.user) {
            this.$router.replace({
              name: 'account'
            })
          } else {
            this.$router.push({
              name: 'login',
              params: {
                redirect: 'account'
              }
            })
          }
      }
    }
  }
}
</script>

<style lang='scss'>

  .weui-tabbar {
    position: fixed;
  }

  .weui-tab {
    padding-top: 40px;
    padding-bottom: 50px;
    // overflow: hidden;
    // -webkit-overflow-scrolling: none;
  }

  .weui-tab__panel {
    padding-top: 0;
    padding-bottom: 0;
  }

  .weui-tabbar__icon {
    padding: 3px;
  }

  .weui-tabbar__icon .weui-icon-search {
    font-size: 20px !important;
    &:before {
      margin: 0;
    }
  }

  .weui-search-bar__box .weui-search-bar__input {
    height: 32px;
    line-height: 32px;
    box-sizing: border-box;
  }

  .weui-tabbar__item {

    &.active .weui-tabbar__icon > i,
    &.active .weui-tabbar__label {
      color: #0971ce;
      // font-weight: bold;
    }
  }
</style>
